<template>
  <div style="height: 6vh;background-color:#fff;padding: 10px 20px;">
    <span style="line-height:60px;font-size:20px;">影片列表</span>
    <el-button type="primary" style="float: right;margin-top: 10px;"
               @click="insertMovies">新增影片</el-button>
  </div>
<!-- 保存影片窗口 -->
  <el-dialog
      :title="dialogTitle"
      style="width: 1000px;padding: 40px;"
      v-model="insertMoviesDialogVisible"
      :before-close="handleClose"
  >
    <el-form label-position="top" label-width="80px">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="影片名称">
            <el-input placeholder="请输入影片名称" v-model="saveMovieForm.movieName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="上映日期">
            <el-date-picker type="datetime"
                            placeholder="请选择日期时间"
                            format="YYYY-MM-DD"
                            value-format="YYYY-MM-DD"
                            v-model="saveMovieForm.releaseYearDate">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="导演">
            <el-input placeholder="请输入导演" v-model="saveMovieForm.director"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="编剧">
            <el-input placeholder="请输入编剧" v-model="saveMovieForm.writer"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="主演">
            <el-input placeholder="请输入演员" v-model="saveMovieForm.cast"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="类型">
            <el-select placeholder="请选择类型" v-model="saveMovieForm.genre" @change="loadMovies">
              <el-option v-for="item in genreOption"
                         :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="2">
        <el-col :span="12">
          <el-form-item label="语言">
            <el-input placeholder="请输入语言" v-model="saveMovieForm.language"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="时长">
            <el-input placeholder="请输入时长" v-model="saveMovieForm.durationMinutes"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="2">
        <el-col :span="12">
          <el-form-item label="影片简介">
            <el-input placeholder="请输入影片简介"
                      type="textarea"
                      rows="7"
                      v-model="saveMovieForm.description"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="海报">
            <el-upload
                v-model:file-list="fileList"
                v-model:action="actionUrl"
                name="file"
                limit="1"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                drag="true"
            >
              <el-icon>
                <Plus/>
              </el-icon>

              <el-dialog v-model="dialogVisible" style="background-color: transparent">
                  <img :src="dialogImageUrl" style="width:100%; height:100%;"/>
              </el-dialog>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="2">
        <el-col :span="8">
          <el-form-item label="制作公司">
            <el-input placeholder="请输入制作公司" v-model="saveMovieForm.productionCompany"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="国家">
            <el-input placeholder="请选择国家" v-model="saveMovieForm.country"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="价格">
            <el-input placeholder="请输入价格" v-model="saveMovieForm.price"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveMovies">保存</el-button>
    </template>
  </el-dialog>
<!--  影片搜索卡片-->
  <el-card style="margin: 20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="影片搜索" style="width: 220px;">
        <el-input placeholder="请输入影片名称" v-model="searchMovieForm.movieName"></el-input>
      </el-form-item>

      <el-form-item label="影片类型" style="width: 220px;">
        <el-select placeholder="请选择影片类型" v-model="searchMovieForm.genre">
          <el-option v-for="item in genreOption" :label="item.label" :value="item.value" :key="item.value"/>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="loadMovies">搜索</el-button>
        <el-button @click="resetMovie">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!-- 影片信息卡片-->
  <el-card style="margin: 20px;">
    <el-table :data="movieArr">
        <el-table-column type="index" label="编号" width="60" align="center"/>
        <el-table-column prop="posterUrl" label="海报" align="center" >
          <template #default="scope">
            <img :src="BASE_URL+scope.row.posterUrl"  width="60" height="90"/>
          </template>
        </el-table-column>
        <el-table-column prop="movieName" label="电影名称" align="center"/>
        <el-table-column prop="releaseYearDate" label="上映日期" align="center"/>
        <el-table-column prop="genre" label="类型" align="center"
                         :formatter="genreFormatter"/>
        <el-table-column prop="cast" label="主演" align="center"/>
        <el-table-column prop="writer" label="编剧" align="center"/>
        <el-table-column prop="director" label="导演" align="center"/>
        <el-table-column prop="language" label="语言" align="center"/>
        <el-table-column prop="country" label="国家" align="center"/>
        <el-table-column prop="durationMinutes" label="时长" align="center"/>
        <el-table-column prop="rating" label="评分" align="center"/>
        <el-table-column prop="description" label="简介" align="center"/>
        <el-table-column label="操作" width="140" align="center">
          <template #default="scope">
            <el-button type="primary" size="small" @click="editMovie(scope.row.id)">编辑</el-button>
            <el-button type="primary" size="small" @click="deleteById(scope.row.id)">删除</el-button>
          </template>
      </el-table-column>
    </el-table>
    <el-pagination layout="total, sizes , prev, pager, next ,jumper"
                   :total="total"
                   v-model:current-page="page.pageNum"
                   v-model:page-size="page.pageSize"
                   :page-sizes="pageSizes"
                   :hide-on-single-page="false"
                   :pager-count="pagerCount"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
    ></el-pagination>
  </el-card>
</template>

<script setup>

import {onMounted, ref} from "vue";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";

const insertMoviesDialogVisible = ref(false);
const dialogTitle = ref("新增影片");

//定义对象用来保存影片的查询条件
const searchMovieForm = ref({movieName: '',genre:''});
//定义数组用来保存影片的列表数据
const movieArr = ref([]);

const total = ref();
const page = ref({pageSize: 5 , pageNum: 1 })
const pageSizes = ref([5,10,15,20])
const pagerCount = ref(5);

const handleSizeChange = (size) => {
  page.pageSize= size;
  loadMovies();
  console.log(page.pageSize);
}
const handleCurrentChange = (currentPage) => {
  page.pageNum = currentPage;
  loadMovies();
  console.log(page.pageNum)
}
const insertMovies = () => {
  insertMoviesDialogVisible.value = true;
}

//定义对象用来收集保存表单的所有影片数据
const saveMovieForm = ref({
  movieName: '',
  releaseYearDate:'',
  director:'',
  writer:'',
  cast:'',
  genre:'',
  language:'',
  durationMinutes:'',
  description:'',
  posterUrl:'',
  actorUrl:'',
  productionCompany:'',
  country:'',
  price:'',
})


//定义加载影片信息的方法
const loadMovies = () => {
  const formData = {
    ...searchMovieForm.value,
    pageSize: page.value.pageSize,
    pageNum: page.value.pageNum
  }
  let data = qs.stringify(formData);
  console.log(data);
  axios.get(BASE_URL+'/v1/movie/select?'+data).then((response)=>{
    if(response.data.code == 2000){
      const pageInfo = response.data.data;
      movieArr.value = pageInfo.list || [];
      total.value=pageInfo.total;
      console.log(response.data.data);
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}
onMounted(()=>{
  loadMovies();
})

//定义重置搜索的方法
const resetMovie = ()=>{
  searchMovieForm.value = {};
  loadMovies();
}

//定义数组用来维护影片类型的选项
const genreOption = ref([
  {label:'恐怖',value:10},
  {label:'动作',value:20},
  {label:'悬疑',value:30},
  {label:'科幻',value:40},
  {label:'动画',value:50}
])
const genreFormatter = (row,column,cellValue,index)=>{
  if(cellValue == 10){
      cellValue = '恐怖';
    }else if(cellValue == 20){
      cellValue = '动作';
    }else if(cellValue == 30){
      cellValue = '悬疑';
    }else if(cellValue == 40){
      cellValue = '科幻';
    }else if(cellValue == 50){
      cellValue = '动画';
  }
  return cellValue;
}

const handleClose = () => {
  if(confirm('您确认要关闭本窗口吗?')){
    insertMoviesDialogVisible.value = false;
    saveMovieForm.value = {};
    fileList.value = [];
  }
}

const saveMovies = () => {

  saveMovieForm.value.posterUrl = fileList.value[0].response.data;

  let data = qs.stringify(saveMovieForm.value);
  console.log(data);
  axios.post(BASE_URL+'/v1/movie/save',data).then((response)=>{
    if(response.data.code == 2000){
      ElMessage.success('保存成功!');
      insertMoviesDialogVisible.value= false;
      dialogVisible.value = false;
      fileList.value=[];
      saveMovieForm.value = {};
      loadMovies();
    }else{
      ElMessage.error(response.data.msg);
    }
  })

}

const editMovie = (id) => {
  insertMoviesDialogVisible.value = true;
  dialogTitle.value = "编辑影片";
  axios.get(BASE_URL+'/v1/movie/select?id='+id).then((response)=>{
    if(response.data.code == 2000){
      saveMovieForm.value = response.data.data.list[0];
      if (saveMovieForm.value.posterUrl) {
        fileList.value = [{
          name: '海报图片',
          url: BASE_URL + saveMovieForm.value.posterUrl,
          response: {
            data: saveMovieForm.value.posterUrl
          }
        }];
      }
      console.log(saveMovieForm.value)
    }else{
      ElMessage.error(response.data.msg);
    }
  })

}

const deleteById = (id) => {
  if(confirm('您确认要删除本条数据吗?')){
    axios.post(BASE_URL+'/v1/movie/delete/'+id).then((response)=>{
      if(response.data.code == 2000){
        ElMessage.success('删除成功!');
        loadMovies();
      }else{
        ElMessage.error(response.data.msg);
      }
    })
  }
}

//图片上传相关代码
const fileList = ref([]);
const dialogImageUrl = ref('');
const imageUrl = ref('');
const dialogVisible = ref(false);
const actionUrl = ref(BASE_URL+'/v1/file/upload')


const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
  //1.得到要删除的图片路径 uploadFile就是我们要删除的那个图片文件对象
  let imgUrl = uploadFile.response.data;
  //2.给后端发请求,删除图片
  axios.post(BASE_URL+'/v1/file/remove?imgUrl='+imgUrl)
      .then((response)=>{
        if (response.data.code==2000){
          ElMessage.success('删除成功!');
        }
      })
}

const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true;
}


</script>


<style scoped>

</style>